<template>
  <section class="selectSite">
    <span>站点选择：</span>
    <a-select v-model:value="sectionValue" placeholder="请选择"
      :options="sectionOptions.map((item: any) => ({ value: item.id, label: item.siteName }))"
      @change="handleChange"></a-select>
  </section>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, watch, } from "vue";
import getters from "@/store/getters";
import request from "@/api/index";

//type
interface dataSourceType {
  [propName: string]: any;
}
//emits
const emits = defineEmits(['handleChange', 'selectTimeRange']);
//getters
const userInfo = getters.userInfo();
//data
const sectionValue = ref(userInfo.siteId);
const sectionOptions = ref<dataSourceType[]>([]);
//watch

//methods 
//获取站点列表
const getSite = async () => {
  const data: {} = {
    // orgId: userInfo.orgId,
    userId: userInfo.userId,
    allPermissions: true,
  };
  const telData = await request.fetchStationGroupList(data);
  sectionOptions.value = [];
  if (telData.length) {
    sectionOptions.value = telData;
    sectionValue.value = sectionValue.value ? sectionValue.value : telData[0].id;
  }
}
const handleChange = () => {
  emits('handleChange');
}
//onMounted
onMounted(() => {
  getSite();
})
// defineExpose
defineExpose({ sectionValue })
</script>

<style lang="less" scoped>
.selectSite {
  font-size: 14px;
  color: #333;

  .ant-select {
    width: 340px;
  }
}
</style>